<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 页面內容 -->
			<view class="grace-rows"
				style="margin-top: 20rpx; width:750rpx;height:120rpx;background:rgba(255,255,255,1);">
				<view
					style=" margin-left: 40rpx; font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);line-height: 120rpx;">
					抵用券编码：</view>
				<view
					style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);line-height: 120rpx;margin-left: 75rpx;">
					{{ diyongquanbianma }}</view>
			</view>

			<view class="grace-rows"
				style="margin-top: 4rpx; width:750rpx;height:120rpx;background:rgba(255,255,255,1);">
				<view
					style=" margin-left: 40rpx; font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);line-height: 120rpx;">
					转让对象：</view>
				<view style="position: relative;top: 35rpx;left: 20rpx;">
					<input v-model="phone" @input="phones" placeholder="请输入对方手机号码" type="number"
						style="display: inline-block;" />
					<view v-if="namest" class="names">姓名：{{name}}</view>
					<view
						style="position: relative;top: 10rpx; width:520rpx;height:1rpx;background:rgba(153,153,153,1);">
					</view>
				</view>
			</view>

			<view @tap="querenzhuangrang()" :style="{background:button_color}"
				class="button_color" >
				确认
			</view>

			<graceShade background="rgba(0,0,0,0.8)" :show="show">
				<view class="chai_tan">
					<image src="../../static/tanhao.png" class="tanhao"></image>
					<text class="wenzi">请谨慎转让,确认后无法转回或修改!</text>
					<view @tap="c_tanchuang" class="c_queren">确认</view>
					<view @tap="show_tanchuang" class="c_queren2">取消</view>
				</view>
			</graceShade>

		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceShade from "../../graceUI/components/graceShade.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				quan_id: '',
				diyongquanbianma: '',
				phone: '',
				name: '',
				namest: false,
				show: false,
			}
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		onLoad: function(opt) {
			this.diyongquanbianma = opt.diyongquanbianma;
			this.quan_id = opt.b_user_id;
		},
		methods: {
			//确认按钮
			querenzhuangrang() {
				var vm = this;
				if (vm.phone === '' || vm.namest==false) {
					uni.showToast({
						title: '请输入正确的下级用户手机号',
						icon: 'none'
					})
				} else {
					vm.show = true;

				}
			},
			// 转让对象名称显示/隐藏
			phones() {
				var vm = this
				this.myPost(
					'api/deductioncoupons/get_coupons_user	', {
						phone: vm.phone
					},
					function(res) {
						var data = res.data;
						if (res.code !== 200 && vm.phone.length === 11) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							vm.namest = false
						} else {
							if (vm.phone.length === 11) {
								vm.namest = true
								vm.name = data.name;
							} else {
								vm.namest = false
							}
						}
					}
				)

			},
			// 确认弹框显示
			c_tanchuang() {
				var vm = this;
				vm.myPost(
					'api/deductioncoupons/coupons_transfer', {
						coupons_id: vm.quan_id,
						phone: vm.phone
					},
					function(res) {
						if (res.code == 200 ) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/card_coupon2'
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				)
				this.show = false;
			},
			// 取消隐藏
			show_tanchuang() {
				this.show = false;
			},
		},
		components: {
			gracePage,
			graceShade
		}
	}
</script>

<style>
	.button_color{
		margin: 0 auto;position: relative;top: 290rpx; width:500rpx;height:90rpx;background:rgba(218,28,30,1);border-radius:6rpx;font-size:32rpx;font-weight:400;color:rgba(255,255,255,1);line-height: 90rpx;text-align: center;
	}
	.names {
		display: inline-block;
		color: #999999;
	}

	.chai_tan {
		width: 540rpx;
		height: 340rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.wenzi {
		/* display: block; */
		display: inline-block;
		font-size: 32rpx;
		margin-top: 56rpx;
		margin-left: 30rpx;
		white-space: nowrap;
	}

	.c_queren {
		position: relative;
		top: 60rpx;
		width: 270rpx;
		height: 70rpx;
		background: rgba(218, 28, 30, 1);
		border-radius: 0rpx 0rpx 0rpx 10rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 70rpx;
		display: inline-block;
	}

	.c_queren2 {
		position: relative;
		top: 60rpx;
		width: 270rpx;
		height: 70rpx;
		background: rgba(255, 78, 80, 1);
		border-radius: 0rpx 0rpx 10rpx 0rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 70rpx;
		display: inline-block;
	}

	.tanhao {
		width: 54rpx;
		height: 54rpx;
		margin-top: 50rpx;
		margin-left: 244rpx;
	}
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
